<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
</head>

<body>
    <div id="app">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

        <el-dialog title="详细信息" :visible.sync="dialogTableVisible">
            <el-table :data="tableData">
                <el-table-column property="id" label="ID" width="150"></el-table-column>
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                tableData: [{
                    id: '1',
                    date: '2020-1-2',
                    name: '瞎子',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '2',
                    date: '2016-2-06',
                    name: '白手',
                    address: '上海市外滩'
                }, {
                    id: '3',
                    date: '2019-09-07',
                    name: '蓝拳',
                    address: '上海市闽江区'
                }, {
                    id: '4',
                    date: '2018-05-01',
                    name: '奶妈',
                    address: '无锡市'
                }],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px'
            },
            methods: {
                handleClick(row) {
                    this.$alert('id为'+row, '查询结果', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${action}`
                            });
                        }
                    });
                }
            }
        })
    </script>
</body>

</html>